@import '../styles/themes.scss';

.qrcode-page {
  padding: 20px;
  background-color: var(--bg-color, #f5f5f5);
  min-height: 100vh;
  box-sizing: border-box;

  .card {
    background-color: var(--card-bg-color, #fff);
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 20px;
    box-shadow: var(--card-shadow, 0 2px 10px rgba(0, 0, 0, 0.1));

    .card-title {
      font-size: 24px;
      font-weight: bold;
      margin-bottom: 16px;
      color: var(--text-primary-color, #333);
    }
  }

  .input-area {
    display: flex;
    flex-direction: column;
    margin-bottom: 16px;

    .input {
      border: 1px solid var(--border-color, #ddd);
      border-radius: 4px;
      padding: 12px 16px;
      font-size: 24px;
      margin-bottom: 12px;
    }

    .generate-btn {
      background: var(--button-bg, linear-gradient(135deg, #A8E6CF, #83D0C9));
      color: white;
      font-size: 24px;
      line-height: 48px;
      margin-top: 8px;
      border: none;
      border-radius: 6px;
    }
  }

  .canvas-container {
    display: flex;
    justify-content: center;
    margin: 20px 0;
  }

  .qrcode-canvas {
    background-color: #fff;
    border: 1px solid var(--border-color, #eee);
  }

  .button-group {
    display: flex;
    justify-content: space-between;
    margin-top: 16px;
    gap: 12px;

    .save-btn, .share-btn {
      flex: 1;
      background: var(--button-bg, linear-gradient(135deg, #A8E6CF, #83D0C9));
      color: white;
      font-size: 24px;
      line-height: 48px;
      border: none;
      border-radius: 6px;
    }

    .share-btn {
      background: var(--secondary-color, #DCEDFF);
      color: var(--text-primary-color, #333);
    }
  }

  .scan-btn {
    background: var(--button-bg, linear-gradient(135deg, #A8E6CF, #83D0C9));
    color: white;
    font-size: 24px;
    line-height: 48px;
    margin-top: 8px;
    border: none;
    border-radius: 6px;
  }

  .result-container {
    margin-top: 16px;
    padding: 16px;
    background-color: var(--secondary-color, #f9f9f9);
    border-radius: 8px;
    border: 1px solid var(--border-color, #eee);

    .result-title {
      font-size: 24px;
      color: var(--text-secondary-color, #666);
      margin-bottom: 12px;
    }

    .result-content {
      font-size: 24px;
      color: var(--text-primary-color, #333);
      word-break: break-all;
      margin-bottom: 16px;
      background-color: var(--card-bg-color, #fff);
      padding: 12px;
      border-radius: 6px;
      border: 1px solid var(--border-color, #eee);
    }

    .copy-btn {
      background: var(--button-bg, linear-gradient(135deg, #A8E6CF, #83D0C9));
      color: white;
      font-size: 24px;
      line-height: 48px;
      border: none;
      border-radius: 6px;
      width: 100%;
    }
  }

  .share-card {
    background-color: var(--card-bg-color, #fff);
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 20px;
    box-shadow: var(--card-shadow, 0 2px 10px rgba(0, 0, 0, 0.1));

    .share-card-title {
      font-size: 24px;
      font-weight: bold;
      margin-bottom: 16px;
      color: var(--text-primary-color, #333);
    }

    .share-card-content {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 16px;
      background-color: var(--secondary-color, #f9f9f9);
      border-radius: 8px;
      border: 1px solid var(--border-color, #eee);
    }

    .share-text {
      font-size: 26px;
      font-weight: bold;
      color: var(--text-primary-color, #333);
      flex: 2;

      .share-desc {
        font-size: 24px;
        font-weight: normal;
        color: var(--text-secondary-color, #666);
        margin-top: 8px;
      }
    }

    .share-card-btn {
      flex: 1;
      background: var(--button-bg, linear-gradient(135deg, #A8E6CF, #83D0C9));
      color: white;
      font-size: 24px;
      line-height: 48px;
      border: none;
      border-radius: 6px;
      margin-left: 16px;
    }
  }
}
